<template>
	<!-- #ifdef H5||APP-PLUS -->
	<view class="c-lottie" :lottieData="lottieData" :change:lottieData="lottie.render" :fun='fun' :change:fun='lottie.callPlayer'>
		<div :id='myCanvasId'></div>
	</view>
	<!-- #endif -->
	<!-- #ifdef MP -->
	<view class="c-lottie" >
		<canvas class="canvas" :id="myCanvasId" type="2d"></canvas>
	</view>
	<!-- #endif -->
</template>
<script setup>
	/**
	 * c-lottie Lottie组件
	 * @property {String} canvasId 画布id
	 * @property {String} width 图像宽度 默认750rpx 单位rpx/px
	 * @property {String} height 图像高度 默认750rpx 单位rpx/px
	 * @property {String} src Lottie文件地址 小程序只支持网络地址
	 * @property {String} data Lottie文件data 小程序不支持
	 * @property {Boolean} autoPlay 是否自动播放 默认true
	 * @property {Boolean} loop 是否循环播放 默认值为 true
	 * @property {String} renderer 渲染模式 默认值为canvas 可选值 svg|canvas 小程序不支持
	 * @property {Boolean} isOnChange 是否开启播放进度监听 默认false false时不触发onEnterFrame
	 * @event {Function()} onComplete 监听动画播放完成
	 * @event {Function()} onLoopComplete 监听当前循环播放完成
	 * @event {Function()} onEnterFrame 监听动画播放进度
	 * @event {Function()} onSegmentStart 监听开始播放一个动画片段
	 * 组件内方法统一使用 call(funName, args) 调用player实例方法 详见文档
	 * */
	 import uuid from './js/uuid.js'
	 import { reactive,ref,getCurrentInstance, computed,onUnmounted } from "vue";
	 let lottieData=ref()
	 const myCanvasId = computed(()=>{
		 if(!props.canvasId){
			 return 'c'+uuid(18)
		 }else{
			return props.canvasId
		 }
	 })
	 const props = defineProps({
			canvasId:{
				type:String
			},
			width:{
				 type:String,
				 default:'750rpx'
			},
			height:{
				 type:String,
				 default:'750rpx'
			},
			src:{
				type:String,
			},
			data:{
				type:String,
			},
			autoPlay:{ //是否自动播放
				type:Boolean,
				default:true
			},
			loop:{ //是否循环播放 默认值为 true
				type:Boolean,
				default:true
			},
			renderer:{ //渲染模式 默认值为canvas 可选值 svg
				type:String,
				default:'canvas',
			},
			isOnChange:{
				type:Boolean,
				default:false
			}
		})
		lottieData.value = JSON.stringify(Object.assign({myCanvasId:myCanvasId.value},props))
		let fun =ref({})
		const call=(name,args)=>{
			fun.value={name,args}
			// #ifdef MP
			callPlayer(fun.value)
			// #endif
		}
		onUnmounted(()=>{
			// 组件卸载销毁实例
			call('destroy')
		})
		defineExpose({call})
		// #ifdef MP
		import lottie from 'lottie-miniprogram'
		const getContext=()=>{
			return new Promise((resolve) => {
				const {pixelRatio} = uni.getSystemInfoSync()
				uni.createSelectorQuery()
					.in(getCurrentInstance())
					.select(`#${myCanvasId.value}`)
					.fields({ node: true, size: true })
					.exec(res => {
						let {node} = res[0]
						resolve({node,pixelRatio})
					})
			})
		}
		let player=null
		const render=async ()=>{
			const {node}=await getContext()
			const context = node.getContext('2d')
			console.log(lottie);
			// lottie.setup(node)
			// // player=loadAnimation({
   //              loop: props.loop,
   //              autoplay: props.autoPlay,
   //              //远程动画。一定要把json格式的文件放到服务器中，并且注意域名是合法的
   //              path:props.src,
   //              rendererSettings: {
   //                  context,
   //              },
   //          })

		}
		render()
		const callPlayer=(val)=>{
			if(!val.name)return;
			let {name, args} = val
			console.log(name, args);
			if(Array.isArray(args)){
				player[name](...args)
			}else{
				player[name](args)
			}
		}
		const emits=defineEmits(['onComplete','onLoopComplete','onEnterFrame','onSegmentStart'])
		// #endif
</script>
<!-- #ifndef MP -->
<script>
	//renderjs中callMethod方法只能发送到选项式中...
	export default {
		emits:['onComplete','onLoopComplete','onEnterFrame','onSegmentStart'],
		methods:{
			receiveRenderData(val){
				// console.log(val);
				this.$emit(val.name,val.val)
			}
		}
	}
</script>
<script src='./js/render.js' lang="renderjs" module='lottie'></script>
<!-- #endif -->
<style lang="scss">
	.c-lottie{
		width: v-bind(width);
		height: v-bind(height);
		/* #ifndef MP */
		div{
			width: 100%;height: 100%;
		}
		/* #endif */
		
		.canvas{
			width: 100%;height: 100%;
		}
	}
</style>
